<template>
 <!-- <a-button type="primary" @click="showDrawer">Open</a-button> -->
 <div v-show="!open" class="rrrr0"   @click="showDrawer">
  <img :src="m27" alt="" srcset="">
  <div class="mxingTreeBox">
    <div class="mxingTree">模</div>
  <div class="mxingTree mxingTreeMT">型</div>
  <div class="mxingTree">树</div>
  </div>
 </div>

 
 <div class="position-relative"> 
 <div v-show="open" class="rrrr"   @click="showDrawer">
  <img :src="m27" alt="" srcset="">
  <div class="mxingTreeBox">
    <div class="mxingTree">模</div>
  <div class="mxingTree mxingTreeMT">型</div>
  <div class="mxingTree">树</div>
  </div>
 </div>
  
 <a-drawer 
    width="238"
    title="" 
    placement="left"
    :closable="false"
    :rootStyle="rootStyle"
    :open="open"
    @close="onClose"
    :mask="false" 
    v-drawer-drag
  > 
    <div>
      <transition
    appear
    name="animate__animated animate__bounce"
    enter-active-class="animate__backInLeft"
    leave-active-class="animate__backOutRight"
>
  <h2>Animate.css</h2>
</transition>
      <!-- <Tree/> -->
    </div>
  </a-drawer>
  </div>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
import m27 from "../../assets/img/m27.png" 
 import Tree from '@/components/modelPage/Tree.vue';
const open = ref (false);
const rootStyle=ref({
  position: 'absolute',
    top: '198px!important'
})
const showDrawer = () => {
  open.value =  !open.value ;
};
</script>
<style scoped lang="scss">
.ant-drawer-content-wrapper{
position:relative;
}
.position-relative{
  // position: relative;
 
}
.rrrr0{
   width: 36px;
  height: 134px;
  position: absolute;
    left: 0px;
    z-index: 999999; 
    top: 57%;
    cursor: pointer; 
 
   img{
    width: 100%;
    height: 100%;
   }
}
.rrrr{
   width: 36px;
  height: 134px;
  position: absolute;
    left: 233px;
    z-index: 999999; 
    top: 57%;
    cursor: pointer; 
  transform: translateX(0);  
   animation: example1  .3s ease-in 0s backwards;
   img{
    width: 100%;
    height: 100%;
   }

}
@keyframes example1 {
  0% {
    transform: translate(-100px);
    opacity: 0;
  }
 
  50% {
    transform: translate();
    opacity: 0.5;
  }
 
  100% {
    transform: translate(0); 
  }
}
.mxingTree {
   color: rgba(102, 102, 102, 1);
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 12px;
}
.mxingTreeBox{
  margin-top: -91px;
    margin-left: 10px;
}
.mxingTreeMT{
  margin: 5px 0;
}

</style>
<style>
.ant-drawer-content {
  top: 20%;
  position: absolute;
}
.ant-drawer-content-wrapper{
  background: #fff;
}
</style>